<template>
<upload
  id="file1"
  :uploadId="file1"
  :disabledclick="true"
  :showNotAllowed="false"
  @dragenter.native="setDirectory('KWJJ')"
  :style="{ height: `${fileTreeHeight?(`${fileTreeHeight}px`):null}`, }"
>

  <div id="file-tree" class="file-tree">
    <div class="folder-box" id="folder-box" @scroll="fileListScroll($event)" :key="timeKey" >

      <div class="folder-desc">
        <i class="folder-icon"></i>
        <span class="folder-title ell">资料库</span>
        <!-- <vi-tooltip>
          <template slot='title'>
            进入编辑
          </template>
        <div v-show="!isEdit" class="folder-title-icon" @click="editFolder">
          <vi-icon
            type="edit"
            style="font-size: 12px;"
          ></vi-icon>
        </div>
        </vi-tooltip>

        <vi-tooltip>
          <template slot='title'>
            退出编辑
          </template>
          <div v-show="isEdit" class="folder-title-icon" style="padding: 0;border: none;">
            <vi-icon
              type="logout"
              style="font-size: 20px;"
              @click="back"
            ></vi-icon>
          </div>
        </vi-tooltip> -->

        <vi-tooltip>
          <template slot='title'>
            删除
          </template>
          <div v-show="isEdit" class="folder-title-icon" @click="batchDelete" :class="{'disable-delete': disableDel}">
            <vi-icon
              type="delete"
              style="font-size: 12px;"
            ></vi-icon>
          </div>
        </vi-tooltip>

        <vi-tooltip>
          <template slot='title'>
            新建文件夹
          </template>
          <div class="folder-title-icon" @click="addFolder">
            <vi-icon
              type="plus"
              style="font-size: 12px;"
            ></vi-icon>
          </div>
        </vi-tooltip>

        <!-- <vi-tooltip>
          <template slot='title'>
            下载
          </template>
          <div v-show="isEdit" class="folder-title-icon">
            <vi-icon
              type="download"
              style="font-size: 12px;"
              @click="batchDownload"
            ></vi-icon>
          </div>
        </vi-tooltip> -->

      </div>

      <div
        v-for="(directory, index0) in directoryListData"
        v-if="directory.dirType !== 1 || (directory.dirType === 1 && advancedFunStatus === 2)"
        :class="{'folder-wrap': directory.show}"
        :key="`${timeKey}_${directory.id}`"
        @dragenter.stop="setDirectory(directory.id, directory.dirType)"
      >
        <div v-if="!directory.folderEdit" class="folder-self" :style="(index0 === directoryListData.length - 1) || directory.show ? 'border-bottom: 1px solid #dcdcdc;' : ''">

          <vi-checkbox
            v-if="directory.dirType !== 1"
            class="folder-self-checkbox"
            v-model="directory.checked"
            :checked="directory.checked"
            @change="checkboxChange('all', $event, index0)"
            @click="checkboxClick($event)"
          ></vi-checkbox>

          <div
            class="folder-self-title text-noSelect"
            :class="{'margin-left': directory.dirType === 1}"
            @click="fileShow(index0)"
          >
            <vi-dropdown :trigger="['contextmenu']" placement="bottomRight">
              <div
                class="folder-title-name ell text-noSelect"
                style="width: 170px;height: 100%;"
              >
                <div
                  class="file-title-name folder-title-name ell text-noSelect"
                  style="max-width: 105px;"
                  :title="directory.dirName"
                >
                  {{directory.dirName}}
                </div>
                <div class="folder-title-name ell text-noSelect">
                （{{directoryListDataLength[directory.dirName]}}）
                </div>
              </div>
              <vi-menu :class="{'menu-list-disable': directory.dirType !== 2}" slot="overlay" class="menu-list">
                <vi-menu-item key="0" @click="delFolder(directory.id, directory.dirType)">
                  删除
                </vi-menu-item>
                <vi-menu-item key="1" @click="openFolderEdit(index0, directory.dirType)">
                  重命名
                </vi-menu-item>
              </vi-menu>
            </vi-dropdown>
            <vi-icon
              v-if="!directory.show"
              class="folder-self-icon"
              type="down"
              style="font-size: 16px"
            ></vi-icon>

            <vi-icon
              v-if="directory.show"
              class="folder-self-icon"
              type="up"
              style="font-size: 16px"
            ></vi-icon>
          </div>

        </div>
        <div class="folder-self" style="padding-left: 36px;" v-if="directory.folderEdit">
          <input
            class="file-input"
            ref="renameFolderInput"
            :class="{idEdit: directory.folderEdit}"
            @blur="closeFolderEdit(index0)"
            @keyup.enter="$event.target.blur"
            @keyup="checkFolderInput(index0)"
            type="text"
            v-model="directory.dirName"
          >
        </div>

        <!-- 我的列表 start -->
        <ul
          class="file-list"
          v-if="directory.show"
        >
          <li :style="{height: showIndex*4000 + 'px'}"></li>
          <!-- <vi-checkbox-group v-model="directory.selectedList"> -->
          <li
            v-for="(file, index) in fileListMap[directory.id]"
            :key="`${timeKey}_${file.id}`"
            @dblclick.stop="openEditByDbclick(index)"
            @contextmenu="openMenu(index)"
            v-if="( index < (showIndex + 2)*100 && index >= showIndex*100 )"
          >
            <div
              class="file-title-con ell"
              v-show="!file.isEdit"
              :class="[file.id == fileId ? selectedClass : '', index === curEditIndex ? 'hoverClass' : '']"
            >

              <vi-checkbox
                v-if="directory.dirType !== 1"
                class="file-title-checkbox"
                :checked="file.checked"
                @click="checkboxClick($event)"
                @change="checkboxChange(file.id, $event, index0, index)"
              ></vi-checkbox>

              <vi-dropdown
                :trigger="['contextmenu']"
                placement="bottomRight"
              >
                <div
                  class="file-title-name ell text-noSelect"
                  :class="{'margin-left-file': directory.dirType === 1}"
                  :title="file.fileName+'.'+file.fileType"
                  @click="beforeSetFileID(file.status, file.id, file)"
                >
                  <!-- @click="beforeSetFileID(file.status, file.id)" -->
                  {{file.fileName}}.{{file.fileType}}
                </div>
                <vi-menu v-if="directory.dirType !== 1 && fileDropVisible" slot="overlay" class="menu-list">
                  <vi-menu-item key="0" @click="delFile(index)">
                    删除
                  </vi-menu-item>
                  <vi-menu-item key="1" @click="openEdit(index)">
                    重命名
                  </vi-menu-item>
                  <!-- <vi-menu-item key="2" @click="downloadFile">
                    下载
                  </vi-menu-item> -->
                </vi-menu>
              </vi-dropdown>

              <div
                class="file-title-icon-div"
                @click="beforeSetFileID(file.status, file.id, file)"
              >
              <vi-icon
                class="file-title-icon-span icon-check"
                v-if="file.status === 0"
                type="check-circle"
                style="font-size: 12px; color: #66CD00"
              ></vi-icon>
              </div>

              <status
                v-if="file.id == fileId && status === 1"
                class="status"
                :progress="true"
              />
            </div>

            <div class="file-edit" v-if="file.isEdit">
              <input
                class="file-input"
                ref="renameInput"
                :class="{idEdit:file.isEdit}"
                @blur="closeEdit"
                @keyup.enter="$event.target.blur"
                @keyup="checkInput"
                type="text"
                v-model="file.fileName"
              >
            </div>

          </li>
          <!-- </vi-checkbox-group> -->
          <!-- <li :style="{height: (fileListMap[directory.id].length - (showIndex + 2)*100)*40 + 'px'}"></li> 获取不到length,不知道为什么 -->
          <li :style="{height: (fileListCurLength - (showIndex + 2)*100) <= 0 ? 0 : (fileListCurLength - (showIndex + 2)*100)*40 + 'px'}"></li>
        </ul>
        <!-- 我的列表 end -->
      </div>
    </div>

    <vi-modal
      title="新建文件夹"
      width="400px"
      :visible="(visible && !screenShotsStatus)"
      :destroyOnClose="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
      class="add-folder"
    >
      <div style="font-weight: 700;">
        文件夹名称：
        <vi-input style="width: 250px;" placeholder="请输入文件夹名称" @keyup="checkFolderInput" v-model="folderName"></vi-input>
      </div>
    </vi-modal>

    <!-- <div class="hidden">
      <form :action="downloadFilesUrl" method="post">
        <input type="text" name="fileIds" :value="selectedList" />
        <input ref="formSubmit" type="submit" value="Submit" />
      </form>
    </div> -->

  </div>
</upload>
</template>

<script>
import activeShowMinxin from "../../mixin/activeShow.mixin";
import status from "../public/status";
import bus from '../../libs/event-bus'
import { baseURL } from "../../libs/http";
import _ from 'lodash';
import upload from "../public/upload";
import $ from 'jquery';

export default {
  mixins: [activeShowMinxin],
  components: {
    upload,
    status
  },
  data() {
    //数据存储
    return {
      //目录列表
      directoryListData: [],
      //文件map
      fileListMap: {},
      // 文件列表key
      timeKey: '',
      //选中样式
      selectedClass: "selected",
      //当前目录id
      curDirId: "",
      //当前选中文件索引
      curFileIndex: -1,
      //当前选中菜单索引
      curMenuIndex: -1,
      //菜单是否打开
      isMenuOpen: false,
      //编辑框是否打开
      isEditOpen: false,
      //当前编辑索引
      curEditIndex: -1,
      //当前编辑的文件名
      curEditFileName: '',
      curEditFileNameOld: '', // 当前编辑的文件名旧的
      //当前编辑的文件夹名
      curEditFolderName: '',
      curEditFolderNameOld: '', // 当前编辑的文件名旧的
      // 文件展示隐藏
      fileShowStatue: 0, // 标记哪个文件夹打开
      isEdit: true, // 是否编辑列表
      selectedList: [], // 选中的文件夹数组
      selectedFileList: [], // 选中的文件数组
      // checked: false, // 是否全选
      showIndex: 0, // 展示的起点页，每次展示100个
      // renderNext: false,
      // renderPrev: false,
      wheelDown: true, // 是否向下滚动
      fileListCurLength: 0, // 当前文件夹中文件总数
      timer: null,
      oldFileListScrollTop: 0,
      visible: false, // 新增文件夹弹窗
      folderName: '', // 新增文件夹名称
      dirIds: '', // 所有文件夹id组成的字符串
      disableDel: false, // 是否禁用批量删除按钮
      file1: '#file1',
      originFileListMap: {},
      fileDropVisible: true, // 文件夹操作是否隐藏
      fileTreeHeight: 0, // 组件高度
    };
  },
  created() {
    this.loadDirectoryList(this.loadFileList);
  },
  mounted() {

    if( $('#home')[0] ){
      this.fileTreeHeight = ($('#home')[0].clientHeight) ||0;
    }

    // 当前文件夹是否打开
    if( localStorage.getItem("fileShowStatue") ){
      let status = JSON.parse(localStorage.getItem("fileShowStatue"));
      if( !_.isNumber(status) ){
        status = 0;
      }

      console.log( 'mounted', status, this.fileShowStatue, localStorage.getItem("fileShowStatue") );
      localStorage.setItem("fileShowStatue", JSON.stringify(status));
      this.fileShowStatue = status;
    }

    // 设置tree状态
    bus.$on('setTreeStatus',id => {
      this.fileListMap[this.curDirId].forEach(item => {
        if (id === item.id) {
          this.$set(item, 'status', -1)
        }
      })
    });
  },
  beforeDestroy(){
    bus.$off('setTreeStatus')
  },
  methods: {
    // 获取目录列表
    loadDirectoryList(callback, firstActive) {
      try {
        let userId = this.userId;
        // let userId = 'U_9CEBE88C384E';//ccc待修改
        let opt = _.cloneDeep(this.$url.getDirectoryList);
        opt.url = `${this.$url.getDirectoryList.url}?userId=${userId}`;
        this.$http(opt, {})
          .then(res => {
            let result = res || [];
            let dirIdsArray = [];

            result.forEach( (item,i) => {
              item.show = false;
              item.folderEdit = false; // 文件夹编辑
              item.length = this.directoryListDataLength[item.dirName]||0;
              item.checked = false; // 文件夹全选
              item.chosen = false; // 文件夹是否选中，用于弹窗选择文件夹
              item.selectedList = [];
              dirIdsArray.push(item.id);
            });

            this.setFolderList(result);
            this.selectedList = []; // 清空选中的文件夹和文件数组
            this.selectedFileList = [];

            if (result.length > 0) {

              if(this.directoryListData.length === 1 && this.fileShowStatue !== 0 ){
                this.fileShowStatue = 0;
              }
              else if( this.directoryListData.length !== 1 && this.fileShowStatue > this.directoryListData.length-1  ){
                this.fileShowStatue = 0;
              }

              if (this.fileShowStatue !== -1 && this.fileShowStatue < result.length) {
                result[this.fileShowStatue].show = true;
                this.curDirId = result[this.fileShowStatue].id;
                this.setDirId(this.curDirId);
              }
              this.dirIds = dirIdsArray.join(',');
              this.directoryListData = result;
              callback(firstActive ? true : false, true);

            }
            else{
              this.directoryListData = [];
            }

          })
          .catch(error => {
            this.$message.error("获取目录列表请求出错！");
          });
      }
      catch (error) {
        // console.log(error);
      };

    },
    // 获取文件列表
    loadFileList(firstActive, all) {
      this.disableDel = false;
      let params = {}
      if (all) {
        params = {
          dirId: this.dirIds,
          userId: this.userId
          // ccc待修改
          // userId: 'U_9CEBE88C384E'
        }
      } else {
        params = {
          dirId: this.curDirId,
          userId: this.userId
          //ccc待修改
          // userId: 'U_9CEBE88C384E'
        }
      }
      try {
        this.$http(this.$url.getFileList, params)
          .then(res => {
            let result = res || [];
            this.handleFileList(result);
            // this.$set(this.fileListMap, this.curDirId, result);
            if (this.curDirId) {
              this.fileListCurLength = this.fileListMap[this.curDirId].length;
            } else {
              this.fileListCurLength = 0;
            }
            // 每次重新请求重置状态
            this.setStatus(null);
            //ccc待修改 此处暂时去除
            // this.setPreviewStatus(false)
            //设置到全局缓存
            this.setFileList(result);
            this.selectedList = []; // 清空选中的文件夹和文件数组
            this.selectedFileList = [];
            if (firstActive) {
              let latestFile = this.findLatestFile(result);
              if (latestFile.dirId) {
                if (this.curDirId !== latestFile.dirId) {
                  this.curDirId = latestFile.dirId;
                  this.fileListCurLength = this.fileListMap[this.curDirId].length;
                  for (let i = 0; i < this.directoryListData.length; i++) {
                    if (this.curDirId === this.directoryListData[i].id) {
                      this.fileShowStatue = i;
                    }
                  }
                  this.fileShow(this.fileShowStatue);
                }
                this.beforeSetFileID (latestFile.status||0, latestFile.id, latestFile);
              }
            }
            this.setLoadingLabel(``);
            this.timeKey = (new Date()).valueOf();
          })
          .catch(error => {
            // console.log("loadFileList服务异常", error);
            this.setLoadingLabel(``);
            // this.$message.error("获取文件列表请求出错！");
          });
      } catch (error) {
        // console.log(error);
      }
    },
    // 将文件列表结果处理成需要的格式
    handleFileList (array) {
      this.directoryListData.forEach(item => {
        this.fileListMap[item.id] = [];
      })
      // console.log(this.fileListMap)
      array.forEach(item => {
        item.checked = false
        item.isEdit = false
        this.fileListMap[item.dirId].push(item);
      })
      // 直接用fileListMap，视图中文件夹文件个数不刷新
      Object.keys(this.fileListMap).forEach(key => {
        this.directoryListData.forEach(item => {
          if (key === item.id) {
            this.$set(item, 'length', this.fileListMap[key].length);
          }
        })
      })
      this.originFileListMap = _.cloneDeep(this.fileListMap);
      if (this.advancedFunButtonStatus !== 0 && this.advancedFunStatus === 2) {
        let id = this.getExampleFolderId().id;
        let index = this.getExampleFolderId().index;
        this.fileListMap[id] = _.cloneDeep(this.originFileListMap[id]);
        let files = _.cloneDeep(this.fileListMap[id]);
        files = files.filter(item => item.exampleType && (item.exampleType.indexOf(this.advancedFunButtonStatus) !== -1));
        this.fileListMap[id] = files;
        this.directoryListData[index].length = files.length;
      }
      // console.log(this.directoryListData)
    },
    // 双击重命名
    openEditByDbclick(index) {
      this.curEditIndex = index;
      let curFileList = this.fileListMap[this.curDirId];
      let fileId = curFileList[this.curEditIndex].id;
      // 当前文件正在导出，不能操作
      if( _.indexOf(this.fileDownloadfileIds, fileId) !== -1 ){
        this.$message.warning(`文件导出中，请稍后操作！`);
        return
      }

      if (this.getExampleFolderId().id === this.curDirId) {
        return
      }
      clearTimeout(this.timer)
      this.fileDropVisible = false;
      this.openEdit(index)
    },
    // 编辑文件名
    openEdit(i) {
      this.curEditIndex = i;
      let curFileList = this.fileListMap[this.curDirId];
      let fileId = curFileList[this.curEditIndex].id;
      // 当前文件正在导出，不能操作
      if( _.indexOf(this.fileDownloadfileIds, fileId) !== -1 ){
        this.$message.warning(`文件导出中，请稍后操作！`);
        return
      }

      for (let i = 0; i < curFileList.length; i++) {
        this.$set(curFileList, i, { ...curFileList[i], isEdit: false });
      }
      this.$set(curFileList, this.curEditIndex, {
        ...curFileList[this.curEditIndex],
        isEdit: true
      });
      this.isEditOpen = true;
      this.$nextTick(() => {
        this.$refs.renameInput[0].focus();
      });
      this.curEditFileName = curFileList[this.curEditIndex].fileName;
      this.curEditFileNameOld = curFileList[this.curEditIndex].fileName;
    },
    strLenC(str){
      return str.replace(/[\u0391-\uFFE5]/g,"aa").length;
    },
  // 取消编辑文件名
    closeEdit() {

      let curFileList = this.fileListMap[this.curDirId];
      // let fileName = curFileList[this.curEditIndex].fileName.replace(/(^\s*)|(\s*$)/g, "").replace(/\s+/g, " ");
      let fileName = this.$refs.renameInput[0].value;

      curFileList[this.curEditIndex].fileName = fileName;
      let obj = this.fileListMap
      obj[this.curDirId] = curFileList;
      this.fileListMap = obj;
      if(fileName === this.curEditFileNameOld ){
        console.log('未有效重命名');
        this.loadDirectoryList(this.loadFileList);
        this.curEditFileNameOld = '';
      }else if(this.strLenC(fileName) > 70){
        this.$message.warn("文件名长度不能超过70个字符！");
        this.loadDirectoryList(this.loadFileList);
        this.curEditFileNameOld = '';
      }
      else{
        if (!fileName || fileName == "") {
          this.$message.warn("文件名不能为空！");
          this.$set(curFileList, this.curEditIndex, {
            ...curFileList[this.curEditIndex],
            fileName: this.curEditFileName.replace(/(^\s*)|(\s*$)/g, "")
          });
        } else {
          let id = curFileList[this.curEditIndex].id;
          this.$http(this.$url.renameFile, { id: id, fileName: fileName })
            .then(res => {
              this.loadDirectoryList(this.loadFileList);
              if(fileName === this.curEditFileNameOld ){
                this.curEditFileNameOld = '';
                return
              }
              if (res.state.ok) {
                this.$message.success(`文件重命名成功！`);
              } else {
                this.$message.error(`文件重命名失败，请重试！`);
              }
            })
            .catch(error => {
              // console.log("closeEdit服务异常", error);
              this.$message.error(`文件重命名请求出错！`);
            });
        }
        //

      }

      for (let i = 0; i < curFileList.length; i++) {
        this.$set(curFileList, i, { ...curFileList[i], isEdit: false });
      }

      // for (let i = 0; i < this.fileListMap[this.curDirId].length; i++) {
      //   this.$set(this.fileListMap[this.curDirId], i, { ...this.fileListMap[this.curDirId][i], isEdit: false });
      // }
      // console.log(this.fileListMap)

      this.fileListMap[this.curDirId] = curFileList;
      // this.$set(this.fileListMap, this.curDirId, curFileList);

      // console.log(this.fileListMap)
      this.isEditOpen = false;
      this.curEditIndex = -1;
      setTimeout(() => {
        this.fileDropVisible = true;
      }, 500);

    },
    // 编辑文件夹名
    openFolderEdit(i, type) {
      if (type !== 2) return
      this.$set(this.directoryListData, i, { ...this.directoryListData[i], folderEdit: true });
      this.$nextTick(() => {
        this.$refs.renameFolderInput[0].focus();
      });
      this.curEditFolderName = this.directoryListData[i].dirName;
      this.curEditFolderNameOld = this.directoryListData[i].dirName;
    },
    // 取消编辑文件夹名
    closeFolderEdit(i) {
      let dirName = this.directoryListData[i].dirName.replace(/(^\s*)|(\s*$)/g, "").replace(/\s+/g, " ");

      if (!dirName || dirName == "") {
        this.$message.warn("文件夹名不能为空！");
        this.$set(this.directoryListData, i, {
          ...this.directoryListData[i],
          dirName: this.curEditFolderName.replace(/(^\s*)|(\s*$)/g, "")
        });
      } else {
        let id = this.directoryListData[i].id;
        let opt = _.cloneDeep(this.$url.renameFolder);
        let userId = this.userId;
        // opt.url = `${this.$url.renameFolder.url}/${id}/${dirName}`;
        this.$http(opt, {dirName, userId, id})
          .then(res => {
            if(dirName === this.curEditFolderNameOld ){
              this.curEditFolderNameOld = '';
              return
            }
            if (res.code === 0) {
              this.$message.success(`文件夹重命名成功！`);
            } else {
              this.$message.error(res.message || `文件夹重命名失败，请重试！`);
              this.$set(this.directoryListData, i, {
                ...this.directoryListData[i],
                dirName: this.curEditFolderName.replace(/(^\s*)|(\s*$)/g, "")
              });
            }
          })
          .catch(error => {
            this.$message.error(`文件夹重命名请求出错！`);
          });
      }
      this.$set(this.directoryListData, i, { ...this.directoryListData[i], folderEdit: false });
    },
    // 打开操作菜单
    openMenu(index) {
      // this.curEditIndex = index;
      this.isMenuOpen = true;

      if( this.$store.state.status.fileSearchVisible ){
        this.setFileSearchVisible(false);
      }
    },
    // 文件删除
    delFile(i) {
      this.curEditIndex = i;
      let curFileList = this.fileListMap[this.curDirId];
      let fileId = curFileList[this.curEditIndex].id;

      // 当前文件正在导出，不能操作
      if( _.indexOf(this.fileDownloadfileIds, fileId) !== -1 ){
        this.$message.warning(`文件导出中，请稍后操作！`);
        return
      }

      this.setLoadingLabel(`删除文件中...`);
      this.$http(this.$url.deleteFile, { fileId: fileId }).then(res => {
        this.setLoadingLabel(``);
        if (!res.state.ok) {
          this.$message.error(`删除文件失败，请重试！`);
          return;
        }
        this.$message.success(`删除文件成功！`);
        this.loadDirectoryList(this.loadFileList);
        this.selectedFileList = this.selectedFileList.filter(item => fileId !== item)
        this.directoryListData[this.fileShowStatue].selectedList = this.directoryListData[this.fileShowStatue].selectedList.filter(item => fileId !== item)
        // this.loadFileList(false, true);
        //删除的是当前的文件，列表选择项置空
        if (this.fileItem && this.fileItem.id == fileId) {
          this.setFileID(null);
        }

      });
      this.curEditIndex = -1;
    },
    // 文件下载
    downloadFile() {
      //下载文件，获取文件id
      let fileId = this.fileListMap[this.curDirId][this.curEditIndex].id;
      let url = baseURL + this.$url.downloadFile.url + "?fileId=" + fileId;
      window.open(url, "_self");
      // this.curEditIndex = -1;
    },
    checkboxClick(event){
      // console.log( 'checkboxClick', event );
      // 开启导出动画
      if(event.clientX && event.clientY && $('#fileDownloadDom')[0].offsetTop && $('#fileDownloadDom')[0].offsetLeft ){
        let objAnimation = _.cloneDeep(this.fileDownloadAnimation);
        objAnimation[objAnimation.length-1].startTop = `${event.clientY - $('#fileDownloadDom')[0].offsetTop - 20}px`;
        objAnimation[objAnimation.length-1].startLeft = `${event.clientX - $('#fileDownloadDom')[0].offsetLeft + 150}px`;
        this.setFileDownloadAnimation(objAnimation);
        // console.log( '找导出动画起点位置', event, event.clientY, event.clientX, $('#fileDownloadDom'), $('#fileDownloadDom')[0].offsetLeft, $('#fileDownloadDom')[0].offsetTop, objAnimation );
      }

    },
    // 单选框 i---文件夹序号, j---文件序号
    checkboxChange(type, e, i, j) {
      // console.log( 'checkboxChange', type, e, i, j );
      if (type === 'all') { // 全选或反选
        if (e.target.checked) {
          this.directoryListData[i].checked = true
          this.directoryListData[i].selectedList = []
          this.fileListMap[this.directoryListData[i].id].forEach(item => {
            item.checked = true
            if (this.selectedFileList.indexOf(item.id) === -1) {
              this.selectedFileList.push(item.id)
              this.directoryListData[i].selectedList.push(item.id)
            }
          })
          if (this.selectedList.indexOf(this.directoryListData[i].id) === -1) {
            this.selectedList.push(this.directoryListData[i].id)
          }
          // 我的文件夹（默认的）下无文件，勾选了我的文件夹，置灰
          // if (this.directoryListData[i].dirType === 0 && !this.directoryListData[i].length && this.selectedList.length === 1) {
          //   this.disableDel = true
          // } else {
          //   this.disableDel = false
          // }
        } else {
          this.directoryListData[i].checked = false
          this.directoryListData[i].selectedList = []
          this.selectedList = this.selectedList.filter(item => this.directoryListData[i].id !== item)
          this.fileListMap[this.directoryListData[i].id].forEach(item => {
            item.checked = false
            this.selectedFileList = this.selectedFileList.filter(value => value !== item.id)
          })
          // if (this.directoryListData[i].dirType === 0) {
          //   this.disableDel = false
          // }
        }
      } else { // 单选
        if (e.target.checked) { // 选中
          this.fileListMap[this.directoryListData[i].id][j].checked = true
          if (this.selectedFileList.indexOf(type) === -1) {
            this.selectedFileList.push(type)
            this.directoryListData[i].selectedList.push(type)
          }
        } else { // 取消选中
          this.fileListMap[this.directoryListData[i].id][j].checked = false
          this.selectedFileList = this.selectedFileList.filter(item => type !== item)
          this.directoryListData[i].selectedList = this.directoryListData[i].selectedList.filter(item => type !== item)
        }
      }
    },
    // 文件展示隐藏
    fileShow(index) {
      if (!this.directoryListData[index].length) {
        return
      }

      if (index !== this.fileShowStatue && this.fileShowStatue !== -1) {
        if (!this.directoryListData[this.fileShowStatue].checked) {
          this.fileListMap[this.directoryListData[this.fileShowStatue].id].forEach(item => {
            item.checked = false
            this.selectedFileList = this.selectedFileList.filter(value => value !== item.id)
            this.directoryListData[this.fileShowStatue].selectedList = []
          })
        }
      }
      if (this.directoryListData[index].show) {
        this.directoryListData[index].show = false;
        if (!this.directoryListData[index].checked) {
          this.fileListMap[this.directoryListData[index].id].forEach(item => {
            item.checked = false
            this.selectedFileList = this.selectedFileList.filter(value => value !== item.id)
            this.directoryListData[index].selectedList = []
          })
        }
        this.fileShowStatue = -1;
        this.curDirId = '';
      } else {
        this.directoryListData.forEach(item => item.show = false)
        this.directoryListData[index].show = true;
        this.fileShowStatue = index;
        this.fileListCurLength = this.fileListMap[this.directoryListData[index].id].length;
      }

    },
    // 编辑文件列表
    editFolder () {
      this.isEdit = true;
      this.setEditMode(true);
      this.curEditIndex = -1;

      if( this.$store.state.status.fileSearchVisible ){
        this.setFileSearchVisible(false);
      }
    },
    // 批量下载
    // batchDownload () {
    //   // 资源批量下载
    //   if (!this.selectedList.length) return

    //   if(this.selectedList.length === 1){
    //     let fileId = this.selectedList[0];
    //     let url = baseURL + this.$url.downloadFile.url + "?fileId=" + fileId;
    //     window.open(url, "_self");
    //     return
    //   }

    //   this.$refs.formSubmit.click();
    // },
    // 批量删除
    batchDelete () {
      if (this.disableDel) return
      let length = 0
      this.directoryListData.forEach(item => {
        if (this.curDirId === item.id && !item.checked) {
          length = item.selectedList.length
        }
      })
      if (!this.selectedList.length && !length) return
      // console.log('batchDelete', this.selectedList, this.selectedFileList, this.fileListMap, this.fileDownloadfileIds );
      // 拿文件夹id 去找文件id 看看是不是正在导出的文件
      if( this.fileDownloadfileIds.length > 0 ){
        let status = false;
        if(this.selectedList.length > 0){
          this.selectedList.map( v =>{
            this.fileListMap[v].map( val =>{
              if( _.indexOf(this.fileDownloadfileIds, val.id) !== -1 ){
                this.$message.warning(`文件夹有文件导出中，请稍后操作！`);
                status = true;
              }
              //
            } )
            //
          } )
          //
        }

        if(this.selectedFileList.length > 0){
          this.selectedFileList.map( v =>{
            if( _.indexOf(this.fileDownloadfileIds, v) !== -1 ){
              this.$message.warning(`文件夹有文件导出中，请稍后操作！`);
              status = true;
            }
            //
          } )
          //
        }


        if(status){
          return
        }
        //
      }
      //

      let _this = this
      let title = this.selectedFileList.length > 0 ? '确定删除所选文件么？' : '确定删除所选文件夹么？'
      this.$confirm({
        title: title,
        onOk() {
          _this.setLoadingLabel(`批量删除中...`);
          if (length > 0) {
            _this.delHttp();
          }
          if (_this.selectedList.length > 0) {
            _this.delSelectedFolder();
          }
        },
        onCancel() {}
      })
    },
    // 批量删除文件接口
    delHttp (){
      let selectedFileList = []
      this.directoryListData.forEach(item => {
        if (this.curDirId === item.id) {
          selectedFileList = item.selectedList
        }
      })
      let array = _.cloneDeep(selectedFileList);
      this.selectedFileList.length > 0 ? this.setLoadingLabel(`删除文件中...`) : this.setLoadingLabel(`删除文件夹中...`);
      this.$http(this.$url.deleteFiles, { fileIds: selectedFileList }, false).then(res => {
        this.setLoadingLabel(``);
        if (res.state.ok === 1) {
          this.$message.success(`删除文件成功！`);
          //删除的是当前的文件，列表选择项置空
          if (this.fileItem && _.indexOf(array, this.fileItem.id) !== -1 ) {
            this.setFileID(null);
          }

        }
        else{
          this.$message.error(`删除文件失败，请重试！`);
        }
        this.loadFileList(false, true);
      })
      this.directoryListData.forEach(item => {
        if (this.curDirId === item.id) {
          item.selectedList = []
        }
      })
      this.selectedFileList = []
    },
    // 退出编辑文件列表
    back () {
      this.isEdit = false;
      this.setEditMode(false);
      this.selectedList = [];
    },
    // 调用set之前需要对上传成功的图标状态进行操作
    beforeSetFileID (status, id, latestFile) {
      if(this.status === 1){
        return this.$message.warning('文件识别中，无法切换')
      }
      clearTimeout(this.timer)
      if(this.id === id) return
      // 加个定时器，双击时不打开文件
      this.timer = setTimeout(() => {
        this.curEditIndex = -1
        // if (this.isEdit) {
        //   // 点击目录时，若当前选中的在数组里则删除，否则添加（数组里有的元素checkbox将会勾选上）
        //   this.selectedList.indexOf(id) > -1 ? this.selectedList.splice(this.selectedList.indexOf(id), 1) : this.selectedList.push(id)
        // }
        // 编辑模式下不加载当前文件
        // if (this.isEdit) return
        this.setShadowGrayShow(false); // 关闭web截图模式
        this.setPreviewStatus(false); // 关闭多页pdf选择模块
        this.setFileOldID(this.id)
        this.setFileID(id); // 切换文件
        this.setShadowGrayData(null); // 截图临时数据置空
        this.setStatus(status==0?status:null); // 设置上传识别状态值
        bus.$emit('identifyResult',null,true) // 关闭截图是被遮罩层
        if (status === 0) {
          let opt = _.cloneDeep(this.$url.fileAccess);
          opt.url = `${this.$url.fileAccess.url}/${id}`;
          if(latestFile.fileType === "pdf" && latestFile.filePage > 1){
            this.setPreviewStatus(true)
            return
          }
          this.setStatus(null); // 设置上传识别状态值
          // let opt = _.cloneDeep(this.$url.fileAccess);
          // opt.url = `${this.$url.fileAccess.url}/${id}`;
          this.$http( opt, { fileId: id } ).then(() => {
            // console.log(res);
          })
          this.fileListMap[this.curDirId].forEach(item => {
            if (id === item.id) {
              this.$set(item, 'status', -1)
            }
          })
        }
        // this.setSealAndFingerprintList([]);
        // 切换文件，取消搜索高亮
        // 设置关键词和页码
        this.setSearchKeyWord('');
        this.setSearchKeyNo(1);
      }, 300)
    },
    // 禁止用户输入特殊字符
    checkInput () {
      if (this.curEditIndex === -1) return
      let curFileList = this.fileListMap[this.curDirId]
      // let fileName = curFileList[this.curEditIndex].fileName
      let fileName = this.$refs.renameInput[0].value;

      let specialCharString = ''
      for (let i = 0; i < this.specialCharArray.length; i++) {
        if (i === 0) {
          specialCharString = specialCharString + '[\\' + this.specialCharArray[i]
        } else if (i === this.specialCharArray.length - 1) {
          specialCharString = specialCharString + '\\' + this.specialCharArray[i] + ']'
        } else {
          specialCharString = specialCharString + '\\' + this.specialCharArray[i]
        }
      }

      let reg = new RegExp(specialCharString, 'g')
      let status = true;
      if (reg.test(fileName)) {
        status = false;
        this.$set(curFileList, this.curEditIndex, {
          ...curFileList[this.curEditIndex],
          fileName: fileName.replace(reg, '')
        })
        this.$message.warn('文件名不支持以下字符：' + '\\' + '/:*?<>|');
      }

      // pcxu 解决输入特殊字符不回删的情况，
      this.$refs.renameInput[0].value = status?fileName:this.fileListMap[this.curDirId][this.curEditIndex].fileName;

      // // 去除前后空格正则
      // let trimReg = new RegExp('(^\\s*)|(\\s*$)', 'g')
      // if (trimReg.test(fileName)) {
      //   this.$set(curFileList, this.curEditIndex, {
      //     ...curFileList[this.curEditIndex],
      //     fileName: fileName.replace(trimReg, '')
      //   })
      // }

    },
    checkFolderInput (index) {
      let dirName = isNaN(index) ? this.folderName : this.directoryListData[index].dirName;
      if (dirName.length > 32) {
        dirName = dirName.substring(0, 32);
        this.$message.warn('文件夹名称最大支持32个字符！');
        if (isNaN(index)) {
          this.folderName = dirName;
        } else {
          this.$set(this.directoryListData, index, {
            ...this.directoryListData[index],
            dirName: dirName
          })
        }
        return
      }
      let specialCharString = '';
      for (let i = 0; i < this.specialCharArray.length; i++) {
        if (i === 0) {
          specialCharString = specialCharString + '[\\' + this.specialCharArray[i];
        } else if (i === this.specialCharArray.length - 1) {
          specialCharString = specialCharString + '\\' + this.specialCharArray[i] + ']';
        } else {
          specialCharString = specialCharString + '\\' + this.specialCharArray[i];
        }
      }

      let reg = new RegExp(specialCharString, 'g');
      if (reg.test(dirName)) {
        if (isNaN(index)) {
          this.folderName = dirName.replace(reg, '');
        } else {
          this.$set(this.directoryListData, index, {
            ...this.directoryListData[index],
            dirName: dirName.replace(reg, '')
          })
        }
        this.$message.warn('文件夹名不支持以下字符：' + '\\' + '/:*?<>|');
      }
    },
    // 设置当前文件夹id
    setDirectory(id, type) {
      if (id === 'KWJJ') {
        this.setDirId('KWJJ') // 空文件夹
        return false;
      }
      if (type === 1) {
        this.setDirId('SLWJJ') // 示例文件夹
        return false;
      }
      // if (id === this.currentDirectoryId) return
      this.setDirectoryId(id)
      console.log(id)
      if (id === '') {
        this.setDirId(this.getMyFolderId())
      } else {
        this.setDirId(id)
      }
    },
    fileListScroll(event){
      // console.log('fileListScroll', event, event.path[0], event, ( length > this.showIndex*100),
      // '实际高度：',  event.path[0].scrollHeight, '展示高度：', event.path[0].offsetHeight, '滚动高度：', event.path[0].scrollTop );

      // if (length <= 200) return

      let fileListScrollTop = document.getElementsByClassName('folder-box')[0].scrollTop
      // console.log(fileListScrollTop)

      if (fileListScrollTop - this.oldFileListScrollTop < 0) { // 向上滚动
        this.wheelDown = false
      } else if (fileListScrollTop - this.oldFileListScrollTop > 0) { // 向下滚动
        this.wheelDown = true
      }
      // 用户一次拖动较多时渲染（否则会出现拖动后空白的现象）
      if (Math.abs(fileListScrollTop - this.oldFileListScrollTop) >= 4000) {
        this.showIndex += Math.floor((fileListScrollTop - this.oldFileListScrollTop) / 4000)
        this.showIndex = this.showIndex <= 0 ? 0 : this.showIndex
        console.log(this.showIndex)
        this.$nextTick(() => {
          document.getElementsByClassName('folder-box')[0].scrollTop = fileListScrollTop
        })
      } else {
        if ((this.wheelDown) && (fileListScrollTop >= (this.showIndex + 1) * 4000 )) {
          this.showIndex++
          this.$nextTick(() => {
            document.getElementsByClassName('folder-box')[0].scrollTop = fileListScrollTop
          })
        }
        if ((!this.wheelDown) && (fileListScrollTop - 400 <= this.showIndex * 4000 )) {
          this.showIndex = (this.showIndex - 1) <= 0 ? 0 : (this.showIndex - 1)
          this.$nextTick(() => {
            document.getElementsByClassName('folder-box')[0].scrollTop = fileListScrollTop
          })
        }
      }

      this.oldFileListScrollTop = fileListScrollTop
    },
    // 新增文件夹弹窗
    addFolder () {
      this.visible = true;
    },
    handleOk () {
      let dirName = this.folderName.trim();
      if (!dirName) {
        this.$message.warn('请输入文件夹名称！');
        return ;
      }
      if (dirName.length > 32) {
        this.$message.warn('文件夹名长度不能超过32个字符！');
        return ;
      }
      let userId = this.userId;
      let opt = _.cloneDeep(this.$url.addFolder);
      // opt.url = `${this.$url.addFolder.url}/${dirName}/${userId}`;
      this.$http(opt, {dirName, userId}).then(res => {
        if (res.code === 0) {
          // this.directoryListData.push({
          //   id: res.data.dirId,
          //   dirName: this.folderName,
          //   dirType: 2,
          //   show: false,
          //   folderEdit: false,
          //   length: 0
          // });
          this.$message.success(res.message);
          this.loadDirectoryList(this.loadFileList);
          setTimeout(() => {
            this.folderName = '';
          }, 100)
          this.visible = false;
        } else {
          this.$message.warn(res.message);
        }
      })
      .catch(error => {
        this.setLoadingLabel(``);
      });
    },
    handleCancel () {
      this.visible = false;
      setTimeout(() => {
        this.folderName = '';
      }, 100)
    },
    // 右击文件夹删除
    delFolder(dirId, type) {

      if (type !== 2){ return }

      // 拿文件夹id 去找文件id 看看是不是正在导出的文件
      if( this.fileDownloadfileIds.length > 0 ){
        let status = false;
        this.fileListMap[dirId].map( val =>{
          if( _.indexOf(this.fileDownloadfileIds, val.id) !== -1 ){
            this.$message.warning(`文件夹有文件导出中，请稍后操作！`);
            status = true;
          }
          //
        } )
        //

        if(status){
          return
        }
        //
      }
      //

      this.setLoadingLabel(`删除文件夹中...`);
      let opt = _.cloneDeep(this.$url.delFolder);
      opt.url = `${this.$url.delFolder.url}/${dirId}`;
      this.$http(opt, {}).then(res => {
        this.setLoadingLabel(``);
        console.log(res)
        if (res.code) {
          this.$message.error(`删除文件夹失败，请重试！`);
          return;
        }
        this.$message.success(`删除文件夹成功！`);
        this.loadDirectoryList(this.loadFileList);
        // this.selectedList = this.selectedList.filter(item => dirId !== item);
        this.fileShowStatue = 0;
        //删除的文件夹包含当前的文件，列表选择项置空
        if (this.fileItem && this.fileItem.id) {
          let curItemList = this.fileListMap[dirId].filter(item => item.id === this.fileItem.id);
          if (curItemList.length) {
            this.setFileID(null);
          }
        }
      });
    },
    // 勾选的文件夹删除
    delSelectedFolder() {
      this.selectedFileList.length > 0 ? this.setLoadingLabel(`删除文件中...`) : this.setLoadingLabel(`删除文件夹中...`);
      let dirIds = this.selectedList.join(',');
      let opt = _.cloneDeep(this.$url.delFolder);
      opt.url = `${this.$url.delFolder.url}/${dirIds}`;
      this.$http(opt, {}).then(res => {
        this.setLoadingLabel(``);
        // console.log(res)
        if (res.code) {
          this.selectedFileList.length > 0 ? this.$message.error(`删除文件失败，请重试！`) : this.$message.error(`删除文件夹失败，请重试！`)
          // this.$message.error(`删除文件夹失败，请重试！`);
          return;
        }
        this.selectedFileList.length > 0 ? this.$message.success(`删除文件成功！`) : this.$message.success(`删除文件夹成功！`)
        //删除的文件夹包含当前的文件，列表选择项置空
        if (this.fileItem && this.fileItem.id) {
          for (let i = 0; i < this.selectedList.length; i++) {
            let curItemList = this.fileListMap[this.selectedList[i]].filter(item => item.id === this.fileItem.id);
            if (curItemList.length) {
              this.setFileID(null);
              break;
            }
          }
        }
        this.loadDirectoryList(this.loadFileList);
        this.selectedList = [];
        this.fileShowStatue = 0; // 删除文件夹后，原来的序号就变了，暂时展示第一个
      });
    },
    // 获取 我的文件夹id
    getMyFolderId() {
      for (let i = 0; i < this.directoryListData.length; i++) {
        if (this.directoryListData[i].dirType === 0) {
          return this.directoryListData[i].id;
        }
      }
    },
    // 获取 示例文件夹的文件id
    getExampleFolderId() {
      for (let i = 0; i < this.directoryListData.length; i++) {
        if (this.directoryListData[i].dirType === 1) {
          return {id: this.directoryListData[i].id, index: i};
        }
      }
    },
    // 获取最新上传的文件
    findLatestFile(list) {
      if (list.length) {
        let latestFile = list[0];
        list.forEach(item => {
          if (item.createTime > latestFile.createTime) {
            latestFile = item;
          }
        })
        return latestFile;
      }
      return '';
    },

  },
  computed: {
    fileItem() {
      return this.$store.state.activeFile.item;
    },
    needRefreshList() {
      return this.$store.state.status.needRefreshList;
    },
    fileIndex() {
      return this.$store.state.activeFile.fileIndex;
    },
    userId() {
      return this.$store.state.user.userId;
    },
    fileId() {
      let item = this.$store.state.activeFile.item;
      return item ? item.id : null;
    },
    fileListActive() {
      return this.$store.state.file.fileListActive||[];
    },
    screenShotsStatus() {
      return this.$store.state.status.screenShotsStatus;
    },
    downloadFilesUrl() {
      return `${baseURL.substr(0, baseURL.length-1 )}${this.$url.downloadFiles.url}`;
    },
    specialCharArray() {
      return this.$store.state.file.specialCharArray||[]
    },
    currentDirectoryId() {
      return this.$store.state.file.currentDirectoryId || ''
    },
    advancedFunStatus() {
      return this.$store.state.status.advancedFunStatus;
    },
    advancedFunButtonStatus() {
      return this.$store.state.status.advancedFunButtonStatus;
    },
    directoryListDataLength() {
      let obj = {};
      this.directoryListData.map( (v,i) => obj[v.dirName] = v.length );
      return obj;
    },
    fileDownloadfileIds() {
      return this.$store.state.status.fileDownloadfileIds;
    },
    fileDownloadAnimation(){
      return this.$store.state.status.fileDownloadAnimation;
    },
    resizeStatus(){
      return this.$store.state.status.resizeStatus;
    },
    status(){
      return this.$store.state.file.status;
    },
    id(){
      return this.$store.state.activeFile.id;
    },
  },
  watch: {
    fileIndex(newValue) {
      this.curFileIndex = newValue;
    },
    needRefreshList(newValue) {
      if (newValue) {
        // this.loadFileList(true, true);
        this.loadDirectoryList(this.loadFileList, true);
        this.setNeedRefreshList(false);
      }
    },
    selectedList (newVal) {
      // console.log(newVal)
      this.setAllSelectedFolderList(newVal);
      if (!newVal.length) {
        this.directoryListData.forEach(item => item.checked = false)
      }
      if (newVal.length === 1 && newVal[0] === this.getMyFolderId() && !this.selectedFileList.length) {
        this.disableDel = true
      } else {
        this.disableDel = false
      }
    },
    selectedFileList (newVal) {
      this.setAllSelectedFileList(newVal);
      if (newVal.length) {
        this.disableDel = false
      }
      let flag = true
      for (let i = 0; i < this.directoryListData.length; i++) {
        if (this.curDirId === this.directoryListData[i].id && this.directoryListData[i].length) {
          this.fileListMap[this.curDirId].forEach(item => {
            if (newVal.indexOf(item.id) === -1) {
              flag = false
            }
          })
          if (flag) {
            if (!(this.directoryListData[i].checked)) {
              this.directoryListData[i].checked = true
            }
            if (this.selectedList.indexOf(this.curDirId) === -1) {
              this.selectedList.push(this.curDirId)
            }
          } else {
            if (this.directoryListData[i].checked) {
              this.directoryListData[i].checked = false
            }
            this.selectedList = this.selectedList.filter(item => this.curDirId !== item)
          }
          break
        }
      }
    },
    fileShowStatue (newVal) {
      if (newVal !== -1 && this.directoryListData.length > newVal) {
        this.curDirId = this.directoryListData[newVal].id;
        this.setDirId(this.curDirId);
      }
      localStorage.setItem("fileShowStatue", JSON.stringify(this.fileShowStatue));
      console.log( 'fileShowStatue', newVal, JSON.stringify(this.fileShowStatue) );
    },
    advancedFunButtonStatus (newVal) {
      if (newVal) {
        let id = this.getExampleFolderId().id;
        let index = this.getExampleFolderId().index;
        this.fileListMap[id] = _.cloneDeep(this.originFileListMap[id]);
        let files = _.cloneDeep(this.fileListMap[id]);
        files = files.filter(item => item.exampleType && (item.exampleType.indexOf(newVal) !== -1));
        this.fileListMap[id] = files;
        if (!this.fileId) {
          this.fileShowStatue = this.directoryListData.length - 1;
        }

        if (!this.fileId || id === this.curDirId || (this.originFileListMap[this.getExampleFolderId().id].filter(item => item.id === this.fileId)).length) {
          this.directoryListData.forEach(item => item.show = false);
          if (files.length) {
            this.beforeSetFileID(files[0].status, files[0].id, files[0]);
          } else {
            this.setFileID(null);
          }
          this.directoryListData[index].show = true;
        }
        this.directoryListData[index].length = files.length;

      }
    },
    advancedFunStatus (newVal, oldVal) {
      if (newVal === 1 && oldVal === 2) {
        this.setAdvancedFunButtonStatus(0);
        if (!this.fileId || (this.originFileListMap[this.getExampleFolderId().id].filter(item => item.id === this.fileId)).length) {
          this.setFileID(null);
        }
      }
    },
    resizeStatus(newValue, oldValue){
      if(newValue && $('#home')[0] ){
        this.fileTreeHeight = $('#home')[0].clientHeight ||0;
      }
      //
    },
  },
};
</script>

<style lang="less" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 文字不被选中
.text-noSelect{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.selected {
  background: @primary;
  color: #ffffff;
}

/*
    * 文件树样式
    */

.file-tree{
  width: 100%;
  height: 100%;
}

.folder-box {
  background: #f7f8fa;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.folder-desc {
  background: #ffffff;
  padding: 0 8px;
  border-bottom: 1px solid #dcdcdc;
}

.folder-icon {
  display: inline-block;
  vertical-align: top;
  width: 28px;
  height: 40px;
  background: url(../../assets/image/folder.png) center no-repeat;
}

.folder-title {
  display: inline-block;
  vertical-align: top;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
  color: #090e21;
}

.folder-title-icon {
  float: right;
  width: 20px;
  height: 20px;
  line-height: 12px;
  padding: 2px;
  margin-top: 10px;
  margin-right: 10px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

.disable-delete {
  border-color: #ccc;
  cursor: not-allowed;
}

.disable-delete>i {
  color: #ccc;
}

// .folder-wrap{
  // height: 698px;
  // overflow-x: hidden;
  // overflow-y: auto;
// }

.folder-self{
  width: 240px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #dcdcdc;
}

.folder-self:hover {
  background: rgba(@primary, 0.15);
}

.folder-self-checkbox{
  display: inline-block;
  margin: 0 0 0 15px;
}

.folder-self-title{
  display: inline-block;
  width: calc(100% - 36px);
  height: 40px;
  margin: 0 0 0 5px;
  vertical-align: top;
}

.folder-title-name {
  display: inline-block;
  // width: 160px;
  font-weight: 700;
  color: #090e21;
}

.folder-self-icon{
  float: right;
  margin: 12px 18px 0 0;
}

.file-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #555d75;
  width: 100%;
  // height: calc(100% - 40px);
  overflow-x: hidden;
  overflow-y: auto;
}

.file-list .file-edit {
  padding: 0 20px 0 53px;
  height: 40px;
  line-height: 40px;
}

.file-list .file-title-con ,
.file-list .file-title-tem{
  width: 240px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
}

.file-list .file-title-con:not(.selected):hover {
  /*background: #e4e9fa;*/
  background: rgba(@primary, 0.1);
}
.hoverClass:not(.selected) {
  background: #e4e9fa;
}
.file-title-con .file-title-checkbox,
.file-title-tem .file-title-checkbox{
  margin: 0 0 0 15px;
}

.file-title-tem .file-title-name,
.file-title-con .file-title-name{
  width: 146px;
  overflow: hidden;
  margin: 0 0 0 5px;
}

.file-title-tem .file-title-icon,
.file-title-con .file-title-icon{
  position: absolute;
  top: 13px;
  right: 29px;
}

.file-title-icon-div{
  position: relative;
  display: inline-block;
  width: 25px;
  height: 40px;
  text-align: center;
}

.margin-left {
  margin-left: 36px !important;
}

.margin-left-file {
  margin-left: 53px !important;
}

.icon-loading{
  color: @primary;
}
.icon-check{
  color: #66CD00;
}
.icon-close{
  color: #FF3030;
}

.folder-self .file-input,
.file-list .file-input {
  border: 1px solid @primary;
  width: 140px;
  height: 38px;
}

/*
    * 菜单样式
    */
.menu-box {
  position: absolute;
  background: #ffffff;
  z-index: 99;
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: 0 0 10px #eee;
}

.menu-list .menu-item {
  padding-left: 20px;
  width: 104px;
  height: 36px;
  line-height: 36px;
  background: #ffffff;
  color: #4c4c4c;
  cursor: default;
}

.menu-list .menu-item:hover {
  background: @primary;
  color: #ffffff;
}

.menu-list-disable .ant-dropdown-menu-item,
.menu-list-disable .ant-dropdown-menu-item:hover {
  background: #fff !important;
  color: #ccc !important;
  cursor: not-allowed;
}

.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background: @primary;
  color: #ffffff;
}

.ant-dropdown-menu-item,
.ant-dropdown-menu-submenu-title {
  padding: 0 0 0 20px;
  width: 104px;
  height: 36px;
  line-height: 36px;
}

.hidden{
  width: 0;
  height: 0;
  overflow: hidden;
}

</style>
<style>
.ant-popover-placement-right > .ant-popover-content > .ant-popover-arrow {
  display: none;
}

.ant-dropdown {
  min-width: 104px !important;
}

.add-folder{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
</style>
